<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<title>我的漂友</title>
		<style>
			body,
			html {
				padding: 0;
				margin: 0;
				font-size: 20px;
			}
			
			a {
				text-decoration: none;
				color: black;
			}
			
			p {
				height: 15px;
			}
			
			.user_name {
				font-size: 15px;
				margin-left: 10px;
				width: 70%;
				height: 40px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.gr {
				border-radius: 15px;
				background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
				width: 40%;
			}
			
			.dr {
				border-radius: 15px;
				margin-left: 15%;
				background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
				width: 40%;
			}
			
			.user_headimgurl {
				height: 40px;
				border-radius: 50%;
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<div>
			<table style="margin-top: -65px;height: 45px;width: 100%;background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);position: fixed;z-index: 9999;">
				<td style="width: 1px;float: left;">
					<a href="javascript:history.back(-1);" style="color: white;">
						<img src="../icon/back_white.png" style=" height: 35px;margin-top: 5px;margin-left: 5px;" />
					</a>
				</td>
				<td align="center">
					<img src="../icon/friends.png" style="height: 35px;margin-top: 5px;" />
				</td>
				<td style="width: 1px;float: right;">
				</td>
			</table>
			<table class="table" id="show" style="width: 100%;margin-top: 65px;">
				<!--<tr>
					<td style="width: 10%;">
						<img src="../img/132.jpg" class="user_headimgurl" />
					</td>
					<td style="width: 55%;">
						<p class="user_name">jon_son_</p>
						<p class="message">UserName</p>

					</td>
					<td style="width: 25%;">
						<img id="greets" src="../icon/greets.png" style="border-radius: 15px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);height: 20px;" />
						<img id="drift" src="../icon/start_drift.png" style="border-radius: 15px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);height: 20px;" />
				</tr>-->
			</table>
		</div>

	</body>
	<script>
		var mine = JSON.parse(localStorage.getItem("users"));
		var num = 0;
		get_greet_list(0);
		
		(window).scroll(function() {
			var h = $(window).height() * 0.98; //浏览器窗口的高度
			var y = $(window).scrollTop(); //滚动条位置
			if(y - h >= 0) { //滚动条位置-窗口高度>=0表示已经置底了
				get_greet_list(num);
			}
		})

		function get_greet_list(offset) {
			$.ajax({
				type: "get",
				url: "http://www.xxxx.com/api/users/" + mine.wx_openid + "?type=chatlist&offset=" + offset,
				async: false,
				success: function(res) {
					num+=res.length;
					for(var i = 0; i < res.length; i++) {
						$.ajax({
							url: "http://www.xxxx.com/api/users/" + res[i].user_id + "?type=main",
							type: "get",
							async: false,
							success: function(main_res) {
								sessionStorage.setItem(main_res.wx_openid, JSON.stringify(main_res));
								var td1 = "<tr><td id='td1" + main_res.wx_openid + "' onclick='information(this.id)' style='width: 10%;'><img src='" + main_res.user_headimgurl + "' class='user_headimgurl' /></td>";
								var td2 = "<td id='td2" + main_res.wx_openid + "' style='width: 55%;' onclick='information(this.id)'><p class='user_name'>" + main_res.user_name + "</p></td>";
								var td3 = "<td style='width: 35%;'><img id='gr" + main_res.wx_openid + "' onclick='greet(this.id)' src='../icon/greets.png' class='gr' /><img id='gr" + main_res.user_sex + main_res.wx_openid + "' onclick='drift(this.id)' src='../icon/start_drift.png' class='dr' /></tr>";
								$("#show").append(td1 + td2 + td3);
							}

						})
					}

				}
			});
		}

		function information(id) {
			id = id.substring(3, id.length);
			location.href = "../center/information.html?openid=" + id;
		}

		function greet(id) {

			id = id.substring(2, id.length);
			location.href = "chat.html?openid=" + id;
		}

		function drift(id) {
			var sex = id.substring(2, 3);
			console.log(sex);
			id = id.substring(3, id.length);
			location.href = "../pay/pay.html?openid=" + id + "&sex=" + sex;
		}
	</script>

</html>